<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link rel="stylesheet" type="text/css" href="css/connexion.css" />
        <link rel="stylesheet" href="js/jquery.mobile-1.4.3/jquery.mobile-1.4.3.min.css" />
        <link rel="stylesheet"  href="css/icon-pack-custom.css" />
        <meta name="msapplication-tap-highlight" content="no" />
        <title>Authentification</title>
    </head>
    <body> 
    	<div id="loginPage" data-role="page" style="background-color : lightgrey;">
            <div data-role="header">
                <h1><strong>TACKS</strong></h1>
            </div>
			<div id="alertLoginDiv" data-role="collapsible" data-collapsed="false" class="ui-block-a" style="display: none;">
				<h1>Alerte authentification</h1>
				<p id="alertLogin" style="color: red;"> </p>
				<p><a href="" class="backToLoginDiv" data-role="button" data-mini="true" data-inline="true" style="display: none;">Se connecter</a> </p>
			</div>
            <img id="imgLoginWaiting" alt="" src="img/ajax-load-black.gif" style="display: none;  position: relative; top: 50%; left: 50%; margin-top: 100px;">
            <div id="connectDiv" data-role="content" style="width: 381px;margin : 0 auto;">  
                <form id="loginForm" class="formIndex" action="" method="post" style="width: 381px;">
                    <div data-role="fieldcontain" style="width: 75%; padding-left: 2%;">
                        <input type="text" name="login" id="login" value="" placeholder="Login" autocomplete="on" autofocus required />      
                        <input type="password" name="password" id="password" value="" placeholder="Mot de passe" required />
                    </div>
                    <fieldset class="ui-grid-a" style="width: 100%; padding-left: 2%;">
                        <div class="ui-block-a">
							<a id="connexionButton" data-role="button" data-mini="false" data-icon="check" data-theme="b" style="width: 222px;"> Connexion </a>
							<a href="#" id="forgetPassword" data-role="button" data-mini="true" style="width: 253px; color: #677179;">Mot de passe oublié ? Reinitialisez le ici.</a>
                        </div>
                    </fieldset>
                </form>
                
                <form id="forgetForm" action="" method="post" style="display: none;">
                    <div id="firstDivResetPwd" data-role="collapsible" data-collapsed="false" data-theme="b" >
                    	</p><h1>Réinitialisation de votre mot de passe</h1></p>
						<p> Après avoir complété correctement et validé ce formulaire, un email contenant votre login et votre nouveau mot de passe vous sera envoyé. </p>
							<i style="color: blue;">Prenez soins de changer votre mot de passe à la prochaine connexion. </i>
						</p>
                        <input type="text" name="email" id="emailForget" value="" placeholder="Votre adresse email" autocomplete="on" autofocus required/>      
                    	<input type="text" name="conf_email" id="conf_emailForget" value="" placeholder="Confirmer votre adresse email" autocomplete="on" autofocus required/> 

						<p id="paraInfoResetPwd" style="display: none;"> 
							<i id="iMsgPwd"style="color: red;"> </i>
						</p>
                 
						<p>
							<a href="" class="backToLoginDiv" data-role="button" data-mini="true" data-inline="true">Annuler</a> <a href="#" id="valideEmalForget" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b">Valider</a>
						</p>
					</div>
					
					<div id="secondDivResetPwd" data-role="collapsible" data-collapsed="false" data-theme="b" style="display: none;">
                    	</p><h1>Réinitialisation de votre mot de passe</h1></p>
                
						<p> 
							<i>Votre mot de passe a été réinitialisé avec succès. Veuillez consulter votre boîte mail. </i>
						</p>
						<p>
							<a href="" class="backToLoginDiv" data-role="button" data-mini="true" data-inline="true">Se connecter</a> 
						</p>
					</div>
                </form>
            </div>      
        </div>
        <script type="text/javascript" src="../../platforms/android/assets/www/cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script src="js/jquery.mobile-1.4.3/jquery.mobile-1.4.3.min.js"></script>
        <script src="js/session.js"></script>
        <script src="js/connexion.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>